<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" style="width:100%;height:100%;">
    <div class="page goods-details">
      <mt-actionsheet :actions="actionsImg" v-model="chooseImgVisible"></mt-actionsheet>
      <div class="scroll-view">
        <customHeader middleTitle="商品详情" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <div v-if="detailsArr.length">
            <div v-for="(item,index) in detailsArr" :key="index">
              <textarea
                rows="4"
                v-model="item.value"
                v-if="item&&item['type']=='txt'"
                maxlength="500"
              ></textarea>
              <div class="img-box" v-if="item&&item['type']=='img'">
                <i class="zhk-sbylx" @click="delGoodsPic(index)"></i>
                <img :src="repeatImgUrl(item.value)" @click="chooseImg(index)" alt />
              </div>
            </div>
          </div>
          <textarea rows="4" @blur="txtBlur" v-model="txtModel" placeholder="非必填，请输入商品详情信息"></textarea>
        </div>
        <div class="btn-box">
          <div @click="chooseImg()">添加图片</div>
          <div class="primary" @click="save">确定</div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import config from "../../base/profile/config.json";
export default {
  name: "goodsDetails",
  data() {
    return {
      CommonUtil: CommonUtil,
      popupVisible: false,
      detailsArr: [],
      actionsImg: [],
      chooseImgVisible: false,
      txtModel: "",
    };
  },
  props: {
    detailsParam: {
      type: Array
    },
  },
  methods: {
    delGoodsPic(index) {
      this.detailsArr.splice(index, 1);
    },
    txtBlur() {
      const txtLength = this.detailsArr.filter((item) => { return item.type == "txt" });
      if (txtLength.length >= 49) {
        Toast("最多填写50段文字");
        return;
      }
      const v = this.txtModel;
      this.txtModel = "";
      this.detailsArr.push({ type: "txt", value: v });

    },
    repeatImgUrl(url, resize) {
      if (resize) {
        return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix) + "?" + CommonUtil.imgUrlResize('m_fill', '206', '320');
      }
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix)
    },
    //上传
    chooseImg(index) {
      const imgLength = this.detailsArr.filter((item) => { return item.type == "img" });
      if (imgLength.length >= 20) {
        Toast("最多上传20张图片");
        return;
      }
      const _this = this;
      _this.actionsImg = [
        {
          name: "拍照",
          method: function () {
            jsBridge.selectPicture(
              { options: "拍照", noCrop: true, maxSize: { width: '600', height: '600' } },
              function (result) {
                _this.doUploadPic(result, index);
              },
              function (result) {

              }
            );
          }
        },
        {
          name: "选择图片",
          method: function () {
            jsBridge.selectPicture(
              {
                options: "选择图片",
                maxSize: { width: '600', height: '600' }
              },
              function (result) {
                _this.doUploadPic(result, index);
              },
              function (result) {

              }
            );
          }
        }
      ];

      this.chooseImgVisible = true;
      return false;
    },
    doUploadPic(result, index) {
      const url = window.APP.serverUrl + "/app/img/uploadShopImg.do";
      jsBridge.uploadPic(
        {
          url: url,
          file: result.resultObject,
          data: {},
          crop: {},
          compress: { sizeLimit: "2", unit: "M" }
        },
        (result) => {
          //以下为正常的业务逻辑
          if (result && result.success) {
            const uploadResult = result.resultObject;
            if (uploadResult) {
              if (index != undefined) {//替换
                this.detailsArr[index].value = uploadResult.imageUrl;
              } else {//追加
                this.detailsArr.push({ type: "img", value: uploadResult.imageUrl });
              }
              return;
            }
          }
          const msg = result.msg || "上传失败";
          Toast(msg);
        },
        (result) => {

        }
      );
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    save() {
      this.$emit("saveDetailsData", this.detailsArr);
      this.popupVisible = false;
    },

  },

  created() { },
  components: {
    customHeader,
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        if(this.detailsParam&&this.detailsParam.length){
          this.detailsArr=this.detailsParam;
        }
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "goodsManage";
</style>
